/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    FlatList,
    ScrollView,
} from 'react-native';


var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');


// 导入外部的组件
var MyCell = require('./MineCommonCell');


class Mine extends React.Component {

    render() {
        return (
            <View style={{ flex: 1,  alignItems: 'center' }}>
                { /* other code from before here */ }

                <ScrollView>
                    {this.renderHeader()}

                    <View style={{width:375,height:50}}>
                        <MyCell
                            leftIconName="个人中心-订单"
                            leftTitle="我的订单"
                            rightTitle="全部"
                        />
                    </View>

                    {this.renderMiddle()}
                    <View style={{backgroundColor:'#f2f2f2',width:width,height:10}}></View>


                    <View style={{width:375,height:50,backgroundColor:'#f2f2f2'}}>
                        <MyCell
                            leftIconName="个人中心-评价管理"
                            leftTitle="评价管理"
                        />
                    </View>

                    <View style={{width:375,height:50,backgroundColor:'#f2f2f2'}}>
                        <MyCell
                            leftIconName="个人中心-员工渠道APP-预约服务"
                            leftTitle="预约管理"
                        />
                    </View>

                    <View style={{width:375,height:50,backgroundColor:'#f2f2f2'}}>
                        <MyCell
                            leftIconName="个人中心-上下班"
                            leftTitle="上下班"
                        />
                    </View>


                    <View style={{width:375,height:50,backgroundColor:'#f2f2f2'}}>
                        <MyCell
                            leftIconName="个人中心-BBD位置"
                            leftTitle="我的服务区域"
                            rightTitle="郑州"
                        />
                    </View>

                </ScrollView>


                {this.renderNav()}


            </View>
        );
    }

    renderHeader(){
        return (
            <View style={styles.headerViewStyle}>
                <Image source={{uri:'w_my_header'}} style={{width:375,height:200}}></Image>
                <View style={styles.headerViewContentStyle}>
                    <Image source={{uri:'w_my_head'}} style={{width:64,height:64,marginTop:10}}></Image>
                    <Text style={{marginTop:5, fontSize:17}}>梦想者</Text>
                    <Text style={{marginTop:10 , fontSize:15}}>星级:</Text>
                    <Text style={{color:'orange',marginTop:10}}>您被收藏次数:28</Text>
                </View>
            </View>

        )
    }

    renderMiddle(){
        return (
            <View style={{width:width,height:80,flexDirection:'row'}}>
                {this.renderMiddleItem()}

            </View>
        )
    }


    renderMiddleItem(){
        // 数组
        var itemArr = [];
        // 数据数组
        var data = [{'image':'个人中心-待接单','title':'待服务'},{'image':'个人中心-服务中','title':'服务中'},{'image':'个人中心-已完成','title':'已完成'}]
        // 遍历创建组件装入数组
        for (var  i = 0; i< data.length;i++) {
            // 取出单独的数据
            var item = data[i];

            itemArr.push(
                <TouchableOpacity key={i}>
                    <View style={styles.middleInnerViewStyle}>
                        <Image source={{uri:item.image}} style={{width:15,height:22}}></Image>
                        <Text style={{marginTop:5}}>{item.title}</Text>
                    </View>
                </TouchableOpacity>
            )
        }

        // 返回数组
        return itemArr;
    }



    renderNav() {
        return (
            <View style={styles.navigationViewStyle}>
                <TouchableOpacity activeOpacity={0.5} onPress={()=>{alert('点击了')}}>
                    <Image source={{uri:'个人中心－设置(1)'}} style={{width:22,height:22,marginLeft:15}}></Image>
                </TouchableOpacity>


                <TouchableOpacity>
                    <Image source={{uri:'个人中心－消息1'}} style={{width:22,height:22, marginRight:15}}></Image>
                </TouchableOpacity>
            </View>
        )
    }

}

const styles = StyleSheet.create({

    navigationViewStyle:{
        // backgroundColor:'white',
        width:375,
        height:44,

        position: 'absolute',
        top:20,

        flexDirection:'row',
        justifyContent: 'space-between',
        alignItems:'center',

    },


    headerViewStyle:{
        backgroundColor:'#f2f2f2',
        height:270,
    },

    headerViewContentStyle:{
        backgroundColor:'white',position: 'absolute',left:38,right:38, top:64,height:185,
        borderRadius:5,
        alignItems:'center',
    },

    middleInnerViewStyle:{
        width:(width/3)+1,
        height:80,

        justifyContent:'center',
        alignItems:'center',

        // backgroundColor:'white'

    }

})






module.exports = Mine;





